<template>
    <div>
        <!-- 头部导航 -->
        <van-nav-bar right-text="注册" left-arrow @click-left="onClickLeft" @click-right="onClickRight" />
        <div class="conter">
            <div class="con-a">
                <h1>密码登录</h1>
                <p>短信验证码登录></p>
            </div>
            <!-- 表单 -->
            <van-form @submit="onSubmit">
                <van-cell-group inset>
                    <van-field v-model="data.mobile" name="用户名" placeholder="用户名"
                        :rules="[{ required: true, message: '请填写用户名' }]" />
                    <van-field v-model="data.password" type="password" name="密码" placeholder="密码"
                        :rules="[{ required: true, message: '请填写密码' }]" />
                </van-cell-group>
                <van-checkbox v-model="data.checked">我已同意用户协议及隐私条款</van-checkbox>
                <div style="margin: 16px;">
                    <van-button round block type="primary" native-type="submit">
                        提交
                    </van-button>
                </div>
            </van-form>
            <p>忘记密码?</p>
            <div class="dl-san">
                <p>第三方登录</p>
            </div>
        </div>

    </div>
</template>

<script lang='ts'  setup>
import { showToast } from 'vant';
import { getLogin } from "../utlis/api"
import { ref, reactive, toRefs } from 'vue'
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()
const data = reactive({
    mobile: "13230000059",
    password: "abc12345",
    checked: false
})
const onClickLeft = () => history.back();
//注册
const onClickRight = () => {

}
// 登录
const onSubmit = () => {
    getLogin({ mobile: data.mobile, password: data.password }).then(res => {
        console.log(res);
        if (data.checked == true) {
            localStorage.setItem("token", res.data.token)
            router.push("/")
        } else {
            showToast('请勾选用户协议');
        }

    })
};
</script>

<style scoped>
.conter {
    padding: 30px;
    box-sizing: border-box;
    width: 100%;
}

.con-a {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.con-a h1 {
    font-weight: normal;
}

.dl-san {
    width: 100%;
    text-align: center;
    height: 100px;
    line-height: 100px;
}
</style>